<template>
    <el-container style="height: 100vh;">
        <!-- 头部 -->
        <!-- <el-header>Header</el-header> -->

        <!-- 主体内容 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">
                <el-menu :default-active="$route.path" router>
                    <div class="website-title">宠物之家管理平台</div>
                    <el-menu-item index="/home">
                        <el-icon>
                            <House />
                        </el-icon>
                        数据统计
                    </el-menu-item>
                    <!-- <el-menu-item index="/homeSet">
                        <el-icon>
                            <Setting />
                        </el-icon>
                        首页管理
                    </el-menu-item> -->
                    <el-menu-item index="/animalSet">
                        <el-icon>
                            <Setting />
                        </el-icon>
                        仓库管理
                    </el-menu-item>
                    <el-menu-item index="/articlesSet">
                        <el-icon>
                            <Setting />
                        </el-icon>
                        库存管理
                    </el-menu-item>
                    <el-menu-item index="/TieziSet">
                        <el-icon>
                            <Setting />
                        </el-icon>
                        审批记录
                    </el-menu-item>
                    <el-menu-item index="/userSet">
                        <el-icon>
                            <Setting />
                        </el-icon>
                        用户管理
                    </el-menu-item>
                    <el-menu-item index="/archivesSet">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        物品信息管理
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="header-container">
                    <el-dropdown @command="handleCommand" class="admin-dropdown">
                        <el-button type="primary" class="admin-button">
                            <el-icon><User /></el-icon>
                            <span class="admin-name">{{user_info['username']}}</span>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu class="dropdown-menu">
                                <!-- <el-dropdown-item command="profile" class="dropdown-item">
                                    <el-icon><User /></el-icon>
                                    <span>个人信息</span>
                                </el-dropdown-item>
                                <el-dropdown-item command="password" class="dropdown-item">
                                    <el-icon><Lock /></el-icon>
                                    <span>重置密码</span>
                                </el-dropdown-item> -->
                                <el-dropdown-item command="logout" class="dropdown-item" divided>
                                    <el-icon><SwitchButton /></el-icon>
                                    <span>退出登录</span>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-header>
                <!-- 主要内容区域 -->
                <el-main>
                    <transition name="fade">
                        <router-view></router-view>
                    </transition>
                </el-main>

                <!-- <el-footer>宠物管理后台</el-footer> -->
            </el-container>

        </el-container>
    </el-container>
</template>

<script setup>
import router from '@/router';
import { ElMessageBox } from 'element-plus';
import { onMounted } from 'vue';

const user_info = JSON.parse(localStorage.getItem('user_info'));

onMounted(() => {
  if (router.currentRoute.value.path === '/') {
    router.push('/home');
  }
});

const handleCommand = async (key) => {
    console.log('key',key);
    
  if (key === 'logout') {
    await ElMessageBox.confirm('确认要退出吗', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
    localStorage.removeItem('user_info')
    localStorage.removeItem('token')
    router.push(`/login`)
  } else {
    router.push(`/${key}`)
  }
}



</script>

<style scoped>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    height: 38px;
    line-height: 50px;
}

.header-container {
    display: flex;
    justify-content: flex-end;

}

.admin-dropdown {
    margin-right: 20px;
}

.admin-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 14px;
    transition: all 0.3s;
}

.admin-button:hover {
    background-color: #409EFF;
    color: white;
}

.admin-name {
    font-weight: 500;
}

.dropdown-menu {
    min-width: 140px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    padding: 20px;
}

.website-title {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
    color: #409EFF;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .el-container {
        flex-direction: column;
    }
    
    .el-aside {
        width: 100% !important;
        position: fixed;
        z-index: 1000;
        height: auto;
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .el-menu {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    
    .el-menu-item {
        flex: 1 0 100%;
        text-align: left;
        padding: 12px 20px !important;
        font-size: 14px;
    }
    
    .website-title {
        width: 100%;
        padding: 10px 0;
        font-size: 16px;
    }
    
    .el-header {
        padding: 0 10px;
        position: fixed;
        width: 100%;
        z-index: 1001;
        top: 0;
    }
    
    .el-main {
        margin-top: 60px;
        padding: 15px;
    }
    
    .el-dropdown {
        width: 100%;
    }
    
    .el-button {
        width: 100%;
        text-align: left;
        padding: 0 10px;
    }
}



.fade-enter-active, .fade-leave-active {
  transition: opacity .5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>